<template>
  <div id="echarts2" style="width:100%;height:100%;pointer-events:all"></div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.getData();
  },
  created() {},
  methods: {
    getData() {
      this.$get('/zw/map/getConveniencePlace').then(res => {
        this.showEcharts(res.data)
      })
    },
    showEcharts(data) {
      
      let myChart = this.$echarts.init(document.getElementById("echarts2"));
      var dict = {7:'专业分厅',8:'综合自助终端',9:'政务大厅',10:'镇街级',11:'社区级'}
      var option
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "center",
          left: "left",
          orient: 'vertical',
          textStyle: {color: '#fff'}
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: true,
              position: "center",
              formatter: '{@镇街级}',
              color: '#fff'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: data.map(item => {
              return {
                value: item.num,
                name: dict[item.typeId]
              }
            })
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
